import React, { useState } from 'react';
import { Card, Table, Select, Form, Button, Tabs, Progress, Statistic, Row, Col, DatePicker, Tag } from 'antd';
import { ArrowUpOutlined, ArrowDownOutlined, ExclamationCircleOutlined, CheckCircleOutlined } from '@ant-design/icons';
import './index.less';

const { Option } = Select;
const { TabPane } = Tabs;
const { RangePicker } = DatePicker;

const DataQualityMonitoring: React.FC = () => {
  const [loading, setLoading] = useState(false);
  
  // 模拟数据
  const qualityData = [
    {
      key: '1',
      dataName: '患者基本信息',
      completeness: 95.2,
      accuracy: 93.8,
      consistency: 97.1,
      timeliness: 94.5,
      totalScore: 95.1,
      status: 'normal',
      trend: 'up',
      lastUpdate: '2023-08-21 10:15:32'
    },
    {
      key: '2',
      dataName: '门诊诊断记录',
      completeness: 87.4,
      accuracy: 89.2,
      consistency: 91.5,
      timeliness: 82.3,
      totalScore: 87.6,
      status: 'warning',
      trend: 'down',
      lastUpdate: '2023-08-21 09:45:21'
    },
    {
      key: '3',
      dataName: '住院病历',
      completeness: 93.7,
      accuracy: 91.2,
      consistency: 94.8,
      timeliness: 90.5,
      totalScore: 92.5,
      status: 'normal',
      trend: 'up',
      lastUpdate: '2023-08-21 11:05:12'
    },
    {
      key: '4',
      dataName: '检验检查报告',
      completeness: 96.8,
      accuracy: 95.3,
      consistency: 94.2,
      timeliness: 97.5,
      totalScore: 95.9,
      status: 'normal',
      trend: 'up',
      lastUpdate: '2023-08-21 08:30:45'
    },
    {
      key: '5',
      dataName: '医嘱记录',
      completeness: 81.2,
      accuracy: 78.5,
      consistency: 83.6,
      timeliness: 75.9,
      totalScore: 79.8,
      status: 'error',
      trend: 'down',
      lastUpdate: '2023-08-21 09:15:32'
    }
  ];
  
  // 表格列定义
  const columns = [
    {
      title: '数据名称',
      dataIndex: 'dataName',
      key: 'dataName',
      width: 140
    },
    {
      title: '完整性评分',
      dataIndex: 'completeness',
      key: 'completeness',
      width: 120,
      render: (value) => (
        <Progress 
          percent={value} 
          size="small" 
          status={value < 85 ? 'exception' : 'normal'} 
        />
      )
    },
    {
      title: '准确性评分',
      dataIndex: 'accuracy',
      key: 'accuracy',
      width: 120,
      render: (value) => (
        <Progress 
          percent={value} 
          size="small" 
          status={value < 85 ? 'exception' : 'normal'} 
        />
      )
    },
    {
      title: '一致性评分',
      dataIndex: 'consistency',
      key: 'consistency',
      width: 120,
      render: (value) => (
        <Progress 
          percent={value} 
          size="small" 
          status={value < 85 ? 'exception' : 'normal'} 
        />
      )
    },
    {
      title: '时效性评分',
      dataIndex: 'timeliness',
      key: 'timeliness',
      width: 120,
      render: (value) => (
        <Progress 
          percent={value} 
          size="small" 
          status={value < 85 ? 'exception' : 'normal'} 
        />
      )
    },
    {
      title: '总评分',
      dataIndex: 'totalScore',
      key: 'totalScore',
      width: 100,
      sorter: (a, b) => a.totalScore - b.totalScore,
      render: (value, record) => (
        <span 
          style={{ 
            color: record.status === 'error' ? '#f5222d' : 
                  record.status === 'warning' ? '#faad14' : '#52c41a',
            fontWeight: 'bold' 
          }}
        >
          {value}
          {record.trend === 'up' ? 
            <ArrowUpOutlined style={{ marginLeft: 5, color: '#52c41a' }} /> : 
            <ArrowDownOutlined style={{ marginLeft: 5, color: '#f5222d' }} />
          }
        </span>
      )
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      width: 100,
      render: (status) => {
        if (status === 'normal') {
          return <Tag color="success" icon={<CheckCircleOutlined />}>正常</Tag>;
        } else if (status === 'warning') {
          return <Tag color="warning" icon={<ExclamationCircleOutlined />}>警告</Tag>;
        } else {
          return <Tag color="error" icon={<ExclamationCircleOutlined />}>异常</Tag>;
        }
      }
    },
    {
      title: '最后更新时间',
      dataIndex: 'lastUpdate',
      key: 'lastUpdate',
      width: 160
    },
    {
      title: '操作',
      key: 'action',
      width: 100,
      render: () => (
        <a>查看详情</a>
      )
    }
  ];
  
  return (
    <div className="monitoring-container">
      <Card bordered={false} title="数据质量监控">
        <Row gutter={[16, 16]} className="statistics-cards">
          <Col span={6}>
            <Card>
              <Statistic
                title="平均质量评分"
                value={90.2}
                precision={1}
                valueStyle={{ color: '#3f8600' }}
                prefix={<CheckCircleOutlined />}
                suffix="%"
              />
            </Card>
          </Col>
          <Col span={6}>
            <Card>
              <Statistic
                title="质量异常项"
                value={3}
                valueStyle={{ color: '#cf1322' }}
                prefix={<ExclamationCircleOutlined />}
              />
            </Card>
          </Col>
          <Col span={6}>
            <Card>
              <Statistic
                title="数据源总数"
                value={15}
              />
            </Card>
          </Col>
          <Col span={6}>
            <Card>
              <Statistic
                title="上传数据量"
                value={25643}
                suffix="条"
              />
            </Card>
          </Col>
        </Row>
        
        <div className="filter-container">
          <Form layout="inline">
            <Form.Item label="数据来源">
              <Select defaultValue="all" style={{ width: 120 }}>
                <Option value="all">全部来源</Option>
                <Option value="his">HIS系统</Option>
                <Option value="emr">电子病历</Option>
                <Option value="lis">检验系统</Option>
                <Option value="pacs">影像系统</Option>
              </Select>
            </Form.Item>
            <Form.Item label="质量状态">
              <Select defaultValue="all" style={{ width: 120 }}>
                <Option value="all">全部状态</Option>
                <Option value="normal">正常</Option>
                <Option value="warning">警告</Option>
                <Option value="error">异常</Option>
              </Select>
            </Form.Item>
            <Form.Item label="时间范围">
              <RangePicker />
            </Form.Item>
            <Form.Item>
              <Button type="primary">搜索</Button>
            </Form.Item>
            <Form.Item>
              <Button>重置</Button>
            </Form.Item>
          </Form>
        </div>
        
        <Tabs defaultActiveKey="1">
          <TabPane tab="数据质量监控" key="1">
            <Table 
              columns={columns} 
              dataSource={qualityData} 
              loading={loading}
              pagination={{ 
                pageSize: 10,
                showSizeChanger: true,
                showQuickJumper: true,
                showTotal: (total) => `共 ${total} 条`
              }}
            />
          </TabPane>
          <TabPane tab="质量趋势分析" key="2">
            <div className="chart-placeholder">
              质量趋势分析图表将显示在这里
            </div>
          </TabPane>
          <TabPane tab="异常详情列表" key="3">
            <div className="chart-placeholder">
              异常详情列表将显示在这里
            </div>
          </TabPane>
        </Tabs>
      </Card>
    </div>
  );
};

export default DataQualityMonitoring;
